<template>
  <div class="layout layout-100">
    <Layout class="layout-100">
      <Header class="header-cont main__title--top">{{$route.params.name}}</Header>
      <Content class="content-cont">
        <Form  ref="formData" :model="formData" label-position="top"  :show-message="false">
          <FormItem label="菜单名称" prop="name" :required="$route.params.type !== 'details'">
            <Input class="width50" v-model.trim="formData.name" maxlength="30" :disabled="$route.params.type === 'details'"></Input>
          </FormItem>
          <FormItem label="菜单图标" prop="code">
            <Input class="width50" v-model.trim="formData.defaultIcon" :disabled=true></Input>
          </FormItem>
          <FormItem label="排序" prop="code">
            <Input class="width50" v-model.trim="formData.sort" :disabled=true></Input>
          </FormItem>
          <FormItem label="上级菜单" prop="typeId" >
            <Input class="width50" v-model.trim="formData.parentName" :disabled= true></Input>
          </FormItem>
          <!--<FormItem label="是否置顶" prop="typeId" >
            <Select class="width50" v-model="formData.isTop" placeholder="请选择是否置顶"  :disabled="$route.params.type === 'details'">
              <Option v-for="item in isTopList" :key="item.id" :value="item.code">{{item.name}}</Option>
            </Select>
          </FormItem>-->
        </Form>
      </Content>
      <Footer class="footer-cont" v-show="$route.params.type !== 'details'">
        <Button type="primary" @click="saveSubmit('formData')">保存</Button>
        <Button @click="closetab">取消</Button>
      </Footer>
    </Layout>
  </div>
</template>

<script>
  import { mapMutations } from 'vuex'
  export default {
    name: "EditorMenu",
    data(){
      return{
        typeList:[],
        isTopList:[],
        formData: {
          name: '',
          defaultIcon: '',
          sort:'',
          parentName: '',
          isTop:0
        },
        page: null
      }
    },
    methods: {
      ...mapMutations([
        'closeTag'
      ]),
      closetab() {
        this.closeTag({
          name: this.$route.name,
          params: {...this.$route.params},
          query: {...this.$route.query}
        });
      },
      saveSubmit (name) {
        if(!this.formData.name){
          this.$Message.warning('菜单名称不能为空');
          return;
        }
        let params = {
          "id": this.$route.params.id,
          "name": this.formData.name,
          //"code": "菜单、按钮编码",
          "defaultIcon": this.formData.defaultIcon,//"默认图标",
          //"imageIcon": "自定义图标 (预留)",
          "sort": this.formData.sort,
          "parentId": this.formData.parentId,
          "parentName":this.formData.parentName,
          //"href": "链接",
          //"type": "类型 1菜单 2按钮",
          "isTop": this.formData.isTop//"是否置顶 字典项"
        }
        this.$api.menuManagement.getMenuEdit(params).then((res) => {
          if(res.code === 200){
            this.$Message.success(res.message);
            this.closetab();
            this.$router.push({
              path:'/system/menu-management',
            });
            localStorage.setItem('page',JSON.stringify(this.page))
          }else {
            this.$Message.error(res.message)
          }
        })
      },
      //详情
      getMenuTreeList(){
        let params = this.$route.params.id;
        if(this.$route.params.name === '日志详情'){
          this.$api.operationLog.getOperationLogDetail(params).then((res) => {
            if(res.code === 200){
              let data = JSON.parse(res.data.params);
               this.formData = {...data}
            }else {
              this.$Message.error(res.message);
            }
          })
        }else {
          this.$api.menuManagement.getMenuDetails(params).then((res) => {
            if(res.code === 200){
              this.formData = {...res.data}
            }else {
              this.$Message.error(res.message);
            }
          })
        }
      },
      getMenuEditIsTop(){
        this.$api.menuManagement.getMenuEditIsTop('IS_STICK').then((res) => {
          if(res.code === 200){
            this.isTopList = res.data;
          }else {
            this.$Message.error(res.message);
          }
        })
      },
      initParams() {
        this.page = this.$route.query;
      }
    },
    mounted(){
      this.initParams();
      this.getMenuTreeList();
      this.getMenuEditIsTop();
    }
  };
</script>

<style scoped>
  .width50{
    width: 40%;
  }
</style>
